Eventos e Callbacks

Eventos são ações que o usuário realiza na interface, como clicar em um botão, digitar em um capo de texto, preencher um formulário, arrastar um elemento, etc. No React, podemos utilizar os mesmos eventos que são utilizados nas apis do DOM, como onClick, onChange, onSubmit, onDrag, etc.

Obs.: Eventos no React utilizam camelCase, diferente do DOM que utiliza kebab-case.

function Button() {
  const handleClick = () => {
    alert('Você clicou no botão!')
  }

  return <button onClick={handleClick}>Clique aqui</button>
}

O React utiliza eventos sintéticos, que são eventos que funcionam da mesma forma em todos os navegadores, independente de qual navegador o usuário esteja utilizando.

Os parâmetros que são passados para os eventos são os mesmos que são passados para os eventos do DOM, como event, target, currentTarget, etc.

function Button() {
  const handleClick = (event) => {
    alert(`Você clicou no botão ${event.target.innerText}!`)
  }

  return <button onClick={handleClick}>Clique aqui</button>
}

Callbacks

Callbacks são funções que são passadas como parâmetro para outras funções, e são executadas quando um evento ocorre.

import { useState } from 'react'

function Seller() {
  const [amount, setAmount] = useState(0)

  const handleBuy = () => {
    setAmount(prevState => prevState + 1)
  }

  return <div>a</div>

  return <BuyButton onClick={handleBuy} />
}

function BuyButton({ onClick }) {
  return <button onClick={onClick}>Comprar</button>
}

O exemplo acima é bem simples, é apenas uma soma de um valor, mas é possível fazer coisas mais complexas, como por exemplo, fazer uma requisição para uma api, ou enviar um formulário. A ideia aqui é apenas demonstrar que um evento pode ser disparado e chamado em outro componente passando um callback como parâmetro. Esse é um modelo muito utilizado no dia-a-dia e serve para quebrarmos componentes em partes menores e mais simples.